<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('项目管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<style>
    label {
        white-space: nowrap;
        line-height: 40px;
    }

    .search-collapse {
        padding-top: 25px;
    }

    .float-e-margins {
        margin-bottom: 16.5px;
    }

    .col-sm-6 {
        margin-bottom: 8px;
        margin-top: 8.5px;
    }

    .column {
        width: 100%;
        display: flex;
    }

    .list {
        width: 50%;

    }

    .list-border {
        border-right: 1px solid #e5e6e7;
    }

    .list > .ibox-title {
        border-bottom: 1px solid #e5e6e7;
    }

    .cont {
        text-align: center;
        width: 100%;
        font-size: 55px;
        color: mediumblue;
        line-height: 111px;
        font-weight: 700;

    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="project-form">
                <div class="col-sm-4">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h4>项目分布</h4>
                            <div class="ibox-tools">
                                <!--<a class="collapse-link">-->
                                <!--<i class="fa fa-chevron-up"></i>-->
                                <!--</a>-->
                                <!--<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">-->
                                <!--<i class="fa fa-wrench"></i>-->
                                <!--</a>-->
                                <!--<ul class="dropdown-menu dropdown-user">-->
                                <!--<li><a href="graph_flot.html#">选项1</a>-->
                                <!--</li>-->
                                <!--<li><a href="graph_flot.html#">选项2</a>-->
                                <!--</li>-->
                                <!--</ul>-->
                                <!--<a class="close-link">-->
                                <!--<i class="fa fa-times"></i>-->
                                <!--</a>-->
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-pie-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="ibox">
                        <div class="column">
                            <div class="list list-border">
                                <div class="ibox-title">
                                    <h4>总项目数：</h4>
                                </div>
                                <div class="cont" id="proCount"></div>
                            </div>
                            <div class="list">
                                <div class="ibox-title">
                                    <h4>联营项目数：</h4>
                                </div>
                                <div class="cont" id="joinCount"></div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="list list-border">
                                <div class="ibox-title" style="border-top: 1px solid #e5e6e7;">
                                    <h4>自营项目数：</h4>
                                </div>
                                <div class="cont" id="selfCount"></div>
                            </div>
                            <div class="list">
                                <div class="ibox-title" style="border-top: 1px solid #e5e6e7;">
                                    <h4>信息化负责人数：</h4>
                                </div>
                                <div class="cont" id="personCount"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="ibox" style="padding: 10px;">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目名称：</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="proName" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目地址：</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="proPosition" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目类型：</label>
                                    <div class="col-sm-8">
                                        <select name="proType" class="form-control">
                                            <option value="">请选择</option>
                                            <option th:each="proType : ${proType}" th:text="${proType.paramValue}"
                                                    th:value="${proType.id}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目情况：</label>
                                    <div class="col-sm-8">
                                        <select name="proStatus" class="form-control">
                                            <option value="">请选择</option>
                                            <option th:each="proStatus : ${proStatus}" th:text="${proStatus.paramValue}"
                                                    th:value="${proStatus.id}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">开工时间：</label>
                                    <div class="col-sm-8">
                                        <input type="text" id="startTime" name="startTime" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">竣工时间：</label>
                                    <div class="col-sm-8">
                                        <input type="text" id="endTime" name="endTime" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">工程公司：</label>
                                    <div class="col-sm-8">
                                        <select name="belongComp" class="form-control">
                                            <option value="">请选择</option>
                                            <option th:each="belongComp : ${belongComp}"
                                                    th:text="${belongComp.paramValue}"
                                                    th:value="${belongComp.id}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">项目经理：</label>
                                    <div class="col-sm-8">
                                        <select name="proManagerPerson" class="form-control">
                                            <option value="">请选择</option>
                                            <option th:each="person : ${person}" th:text="${person.name}"
                                                    th:value="${person.id}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">信息化负责人：</label>
                                    <div class="col-sm-8">
                                        <select name="proInfoPerson" class="form-control">
                                            <option value="">请选择</option>
                                            <option th:each="person : ${person}" th:text="${person.name}"
                                                    th:value="${person.id}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6" style="text-align: right; padding-right: 30px;">
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="project:user:save">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.editTab()" shiro:hasPermission="project:user:save">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="project:user:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportData('项目信息')" shiro:hasPermission="project:user:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: echarts-js"/>
<script th:inline="javascript">
    var prefix = ctx + "projectManage";

    $(function () {
        formatDate();
        queryData();
        proChart();
        getCount();
    });

    function queryData() {
        var colnums = [];
        var checkbox = {checkbox: true};
        var pro_name = {field: 'proName', title: '项目名称', sortable: true};
        var pro_type = {field: 'proType', title: '项目类型'};
        var pro_status = {field: 'proStatus', title: '项目情况'};
        var start_time = {field: 'startTime', title: '开工时间', sortable: true};
        var end_time = {field: 'endTime', title: '竣工时间', sortable: true};
        var contract_cost = {field: 'contractCost', title: '合同造价', sortable: true};
        var pro_position = {field: 'proPosition', title: '项目地址', sortable: true};
        var belong_comp = {field: 'belongComp', title: '工程公司', sortable: true};
        var network = {
            field: 'network', title: '网络', align: 'center',
            formatter: function (value, row, index) {
                if (row.network == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var erp = {
            field: 'erp', title: 'ERP', align: 'center',
            formatter: function (value, row, index) {
                if (row.erp == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var attendance = {
            field: 'attendance', title: '劳务考勤', align: 'center',
            formatter: function (value, row, index) {
                if (row.attendance == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var monitor = {
            field: 'monitor', title: '监控', align: 'center',
            formatter: function (value, row, index) {
                if (row.monitor == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var devops = {
            field: 'devops', title: '运维', align: 'center',
            formatter: function (value, row, index) {
                if (row.devops == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var pro_manager_person = {field: 'proManagerPerson', title: '项目经理'};
        var pro_info_person = {field: 'proInfoPerson', title: '信息化负责人'};

        colnums.push(checkbox, pro_name, pro_type, pro_status, start_time, end_time, contract_cost, pro_position, belong_comp, network, erp,
            attendance, monitor, devops, pro_manager_person, pro_info_person);

        var options = {
            uniqueId: "id",
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "项目",
            columns: colnums
        };
        $.table.init(options);
    }

    function formatDate() {
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#startTime'
            });

            laydate.render({
                elem: '#endTime'
            });
        });
    }

    function proChart() {
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left'

            },
            color: ['#E062AE', '#37A2DA', '#67E0E3', '#FFDB5C', '#FF9F7F','#9400D3','#76EE00'],
            series: [{
                name: '区域公司',
                type: 'pie',
                center: ['65%', '50%'],
                radius: '70%',
                data: [],

            }]
        };
        $.ajax({
            url: prefix + "/view",
            dataType: "json",
            async: true,
            data: {},
            type: "POST",
            success: function (data) {
                pieoption.series[0].data = data;
                pieChart.setOption(pieoption);
            },
            error: function () {
            }
        });

        window.addEventListener("resize", function () {
            pieChart.resize();
        });

        pieChart.on('click', function (params) {
            var data = new Object();
            data.belongComp = params.data.id;
            getCount(params.data.id);
            $.table.ajaxInitTable(data);
        });
    }

    function getCount(belongComp) {
        $.ajax({
            url: prefix + "/getCount",
            dataType: "json",
            async: true,
            data: {
                "belongComp": belongComp
            },
            type: "POST",
            success: function (data) {
                $("#proCount").text(data.proCount);
                $("#joinCount").text(data.joinCount);
                $("#selfCount").text(data.selfCount);
                $("#personCount").text(data.personCount);
            },
            error: function () {
            }
        });
    }
</script>
</body>
</html>